<template>
  <vxe-modal
    v-model="visible"
    :resize="true"
    width="600"
    height="400"
    :title="modelTitle"
    :show-zoom="true"
    :destroy-on-close="false"
    :showFooter="true"
    @close="cancel"
    :loading="modalLoading"
  >
    <el-form
      ref="createCateforyFormRef"
      :model="model"
      :rules="rules"
      label-width="100px"
    >
      <el-row>
        <el-form-item label="名称：" prop="name">
          <el-input v-model="model.name"></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="编码：" prop="code">
          <el-input v-model="model.code"></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="排序：" prop="sort">
          <el-input v-model="model.sort"></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="备注：" prop="memo">
          <el-input v-model="model.memo" type="textarea" :rows="3"></el-input>
        </el-form-item>
      </el-row>
    </el-form>

    <template v-slot:footer>
      <el-row>
        <el-col :span="24" style="text-align: center">
          <el-button type="primary" @click="confirm">确定</el-button>
          <el-button type="info" @click="cancel">取消</el-button>
        </el-col>
      </el-row>
    </template>
  </vxe-modal>
</template>

<script>
import request from "@/utils/request";

export default {
  props: {
    value: Boolean,
    model: Object,
    pageAction: String,
    loading: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    value(visible) {
      this.visible = visible;
    },
    loading(loading) {
      this.modalLoading = loading;
    },
  },
  computed: {
    modelTitle() {
      if (this.pageAction === "create") {
        return "新增分类";
      } else if (this.pageAction === "edit") {
        return "编辑分类";
      }
      return "分类详情";
    },
  },
  data() {
    return {
      visible: false,
      modalLoading: false,
      rules: {
        name: [
          { required: true, message: "请输入应用分类名称", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    confirm() {
      this.$refs["createCateforyFormRef"].validate((valid) => {
        if (valid) {
          this.modalLoading = true;
          request({
            url: this.getSaveAppCategoryUrl(),
            method: "post",
            data: { pageAction: this.pageAction, model: this.model },
          })
            .then((res) => {
              const { success, message } = res;
              if (success) {
                this.msgSuccess("保存成功！");
                this.$emit("success");
              } else {
                this.msgError(message || "保存失败！");
              }
            })
            .finally(() => {
              this.modalLoading = false;
            });
        }
      });
    },
    cancel() {
      this.$emit("cancel");
    },
    getSaveAppCategoryUrl() {
      let url = "/workflow/actExtAppCategory/save";
      if (this.pageAction === "edit") {
        url += "?categoryId=" + this.model.categoryId;
      }
      return url;
    },
  },
};
</script>
